<script setup lang="ts">
import { defineProps, computed } from 'vue'
import { Section, GapedRow, GapedColumn } from '@/core/components'

interface LogData {
  raw: string
  tags: string
}

const props = defineProps<{
  logData: LogData
}>()

const parsedTags = computed(() => {
  try {
    return JSON.parse(props.logData.tags)
  } catch (e) {
    return props.logData.tags
  }
})

const isJson = computed(() => {
  return typeof parsedTags.value === 'object' && parsedTags.value !== null
})
</script>

<template>
  <Section width="100%">
    <GapedColumn width="100%" gap="middle">
      <GapedRow width="100%" align-items="flex-start">
        <!-- 结构化字段 -->
        <el-card class="stat-card">
          <template #header>
            <div class="card-header">
              <i class="fas fa-table"></i>结构化字段
            </div>
          </template>
          <div v-if="isJson">
            <div v-for="(value, key) in parsedTags" :key="key" class="tag-item">
              <strong>{{ key }}:</strong> {{ value }}
            </div>
          </div>
          <div v-else>
            {{ logData.tags }}
          </div>
        </el-card>

        <!-- 原始日志 -->
        <el-card class="stat-card">
          <template #header>
            <div class="card-header">
              <i class="fas fa-file-code"></i>原始日志
            </div>
          </template>
          <div class="log-raw">{{ logData.raw }}</div>
        </el-card>
      </GapedRow>
    </GapedColumn>
  </Section>
</template>

<style scoped>
.stat-card {
  flex: 1;
}
.content {
  margin-left: var(--sidebar-width);
  padding: 1.5rem;
  min-height: 100vh;
  width: calc(100% - var(--sidebar-width));
}

.detail-main {
  max-width: 100%;
  margin: 0 auto;
}

.page-header {
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.page-title {
  font-weight: 700;
  color: #2d3748;
  font-size: 1.75rem;
  margin-bottom: 0;
}

.card {
  border: none;
  border-radius: 12px;
  box-shadow: var(--card-shadow);
  margin-bottom: 1.5rem;
  overflow: hidden;
}

.card-header {
  background: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  font-weight: 600;
  font-size: 1.05rem;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
}

.card-header i {
  margin-right: 0.5rem;
  color: var(--primary-color);
}

.card-body {
  padding: 1.25rem;
}

.log-raw {
  background: var(--light-bg);
  border-radius: 8px;
  padding: 1.25rem;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 0.9rem;
  color: #333;
  line-height: 1.5;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

.tag-item {
  margin-bottom: 0.5rem;
}

@media (max-width: 992px) {
  .content {
    margin-left: 70px;
    width: calc(100% - 70px);
    padding: 1.25rem 1rem;
  }
}

@media (max-width: 768px) {
  .content {
    padding: 1rem 0.75rem;
  }

  .detail-main {
    max-width: 100%;
  }

  .card-header {
    padding: 0.75rem 1rem;
  }

  .card-body {
    padding: 1rem;
  }
}
</style>
